<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="Maxence Charriere" name="author">
<meta name="description" content="Documentation about building customizable, independent, and reusable UI elements.">
<meta name="keywords" content="go-app, go, golang, app, pwa, progressive web app, webassembly, web assembly, webapp, web, gui, ui, user interface, graphical user interface, frontend, opensource, open source, github">
<meta name="theme-color" content="#2e343a">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">
<meta property="og:url" content="http://127.0.0.1:60452/components">
<meta property="og:title" content="Building Components: Customizable, Independent, and Reusable UI Elements">
<meta property="og:description" content="Documentation about building customizable, independent, and reusable UI elements.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://go-app.dev/web/images/go-app.png">
<title>Building Components: Customizable, Independent, and Reusable UI Elements</title>
<link type="text/css" rel="preload" href="/app.css" as="style">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" as="style" type="text/css" rel="preload">
<link href="/web/css/prism.css" as="style" type="text/css" rel="preload">
<link rel="preload" href="/web/css/docs.css" as="style" type="text/css">
<link rel="icon" href="https://raw.githubusercontent.com/maxence-charriere/go-app/master/docs/web/icon.svg">
<link href="/web/icon.png" rel="apple-touch-icon">
<link href="/manifest.webmanifest" rel="manifest">
<link rel="stylesheet" type="text/css" href="/app.css">
<link type="text/css" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/web/css/prism.css">
<link rel="stylesheet" type="text/css" href="/web/css/docs.css">
<script defer src="/wasm_exec.js"></script>
<script defer src="/app.js"></script>
<script defer src="/web/js/prism.js"></script>
<script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1013306768105236" crossorigin="anonymous" async></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=G-SW4FQEM9VM"></script>
	<script>
	  window.dataLayer = window.dataLayer || [];
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());
	
	  gtag('config', 'G-SW4FQEM9VM', {'send_page_view': false});
	</script>
</head>
<body>
<div class="fill background" data-goapp-ui="shell">
<div id="goapp-shell-41693dfb-55e6-4596-ae24-c0a9aa0718d0" style="display:flex;width:100%;height:100%;overflow:hidden;">
<div style="position:relative;display:none;flex-shrink:0;flex-basis:270px;overflow:hidden;"><div data-goapp-ui="scroll" class="menu fill"><div style="width:100%;height:calc(100% - 24px);padding:12px 0;">
<div style="width:calc(100% - 24px);padding:0 12px;height:72px;"><div data-goapp="Stack" class="fill" style="display:flex;justify-content:flex-start;align-items:center;"><header><a class="heading app-title" href="/">Go-App</a></header></div></div>
<div style="width:calc(100% - 24px);height:calc(100% - 72px);padding:0 12px;overflow-x:hidden;overflow-y:scroll;"><nav>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="/"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
	</svg></div>
<div>Home</div>
</div></a>
<a class="link heading fit unselectable" title href="/getting-started"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 10.87L7.91 8.1C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39C21.61 2.39 16.66 .269 11 5.93C8.81 8.12 7.5 10.53 6.65 12.64C6.37 13.39 6.56 14.21 7.11 14.77L9.24 16.89C9.79 17.45 10.61 17.63 11.36 17.35C13.5 16.53 15.88 15.19 18.07 13C23.73 7.34 21.61 2.39 21.61 2.39M14.54 9.46C13.76 8.68 13.76 7.41 14.54 6.63S16.59 5.85 17.37 6.63C18.14 7.41 18.15 8.68 17.37 9.46C16.59 10.24 15.32 10.24 14.54 9.46M8.88 16.53L7.47 15.12L8.88 16.53M6.24 22L9.88 18.36C9.54 18.27 9.21 18.12 8.91 17.91L4.83 22H6.24M2 22H3.41L8.18 17.24L6.76 15.83L2 20.59V22M2 19.17L6.09 15.09C5.88 14.79 5.73 14.47 5.64 14.12L2 17.76V19.17Z" />
	</svg></div>
<div>Getting Started</div>
</div></a>
<a title href="/architecture" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M9,2V8H11V11H5C3.89,11 3,11.89 3,13V16H1V22H7V16H5V13H11V16H9V22H15V16H13V13H19V16H17V22H23V16H21V13C21,11.89 20.11,11 19,11H13V8H15V2H9Z" />
	</svg></div>
<div>Architecture</div>
</div></a>
<a class="link heading fit unselectable" title href="/reference"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg width="24px" height="24px" viewBox="0 0 207 78" xmlns="http://www.w3.org/2000/svg">
		<g fill="currentColor" fill-rule="evenodd">
			<path d="m16.2 24.1c-.4 0-.5-.2-.3-.5l2.1-2.7c.2-.3.7-.5 1.1-.5h35.7c.4 0 .5.3.3.6l-1.7 2.6c-.2.3-.7.6-1 .6z"/>
			<path d="m1.1 33.3c-.4 0-.5-.2-.3-.5l2.1-2.7c.2-.3.7-.5 1.1-.5h45.6c.4 0 .6.3.5.6l-.8 2.4c-.1.4-.5.6-.9.6z"/>
			<path d="m25.3 42.5c-.4 0-.5-.3-.3-.6l1.4-2.5c.2-.3.6-.6 1-.6h20c.4 0 .6.3.6.7l-.2 2.4c0 .4-.4.7-.7.7z"/>
			<g transform="translate(55)">
				<path d="m74.1 22.3c-6.3 1.6-10.6 2.8-16.8 4.4-1.5.4-1.6.5-2.9-1-1.5-1.7-2.6-2.8-4.7-3.8-6.3-3.1-12.4-2.2-18.1 1.5-6.8 4.4-10.3 10.9-10.2 19 .1 8 5.6 14.6 13.5 15.7 6.8.9 12.5-1.5 17-6.6.9-1.1 1.7-2.3 2.7-3.7-3.6 0-8.1 0-19.3 0-2.1 0-2.6-1.3-1.9-3 1.3-3.1 3.7-8.3 5.1-10.9.3-.6 1-1.6 2.5-1.6h36.4c-.2 2.7-.2 5.4-.6 8.1-1.1 7.2-3.8 13.8-8.2 19.6-7.2 9.5-16.6 15.4-28.5 17-9.8 1.3-18.9-.6-26.9-6.6-7.4-5.6-11.6-13-12.7-22.2-1.3-10.9 1.9-20.7 8.5-29.3 7.1-9.3 16.5-15.2 28-17.3 9.4-1.7 18.4-.6 26.5 4.9 5.3 3.5 9.1 8.3 11.6 14.1.6.9.2 1.4-1 1.7z"/>
				<path d="m107.2 77.6c-9.1-.2-17.4-2.8-24.4-8.8-5.9-5.1-9.6-11.6-10.8-19.3-1.8-11.3 1.3-21.3 8.1-30.2 7.3-9.6 16.1-14.6 28-16.7 10.2-1.8 19.8-.8 28.5 5.1 7.9 5.4 12.8 12.7 14.1 22.3 1.7 13.5-2.2 24.5-11.5 33.9-6.6 6.7-14.7 10.9-24 12.8-2.7.5-5.4.6-8 .9zm23.8-40.4c-.1-1.3-.1-2.3-.3-3.3-1.8-9.9-10.9-15.5-20.4-13.3-9.3 2.1-15.3 8-17.5 17.4-1.8 7.8 2 15.7 9.2 18.9 5.5 2.4 11 2.1 16.3-.6 7.9-4.1 12.2-10.5 12.7-19.1z" fill-rule="nonzero"/>
			</g>
		</g>
	</svg></div>
<div>Reference</div>
</div></a>
<div class="separator"></div>
<a title href="/components" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M10,5V11H21V5M16,18H21V12H16M4,18H9V5H4M10,18H15V12H10V18Z" />
	</svg></div>
<div>Components</div>
</div></a>
<a href="/declarative-syntax" class="link heading fit unselectable" title><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
	</svg></div>
<div>Declarative Syntax</div>
</div></a>
<a class="link heading fit unselectable" title href="/routing"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M11,10H5L3,8L5,6H11V3L12,2L13,3V4H19L21,6L19,8H13V10H19L21,12L19,14H13V20A2,2 0 0,1 15,22H9A2,2 0 0,1 11,20V10Z" />
	</svg></div>
<div>Routing</div>
</div></a>
<a class="link heading fit unselectable" title href="/static-resources"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M7,15L11.5,9L15,13.5L17.5,10.5L21,15M22,4H14L12,2H6A2,2 0 0,0 4,4V16A2,2 0 0,0 6,18H22A2,2 0 0,0 24,16V6A2,2 0 0,0 22,4M2,6H0V11H0V20A2,2 0 0,0 2,22H20V20H2V6Z" />
	</svg></div>
<div>Images and Static Resources</div>
</div></a>
<a class="link heading fit unselectable" title href="/js"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z" />
	</svg></div>
<div>JavaScript Interoperability</div>
</div></a>
<a class="link heading fit unselectable" title href="/concurrency"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M16,4.5V7H5V9H16V11.5L19.5,8M16,12.5V15H5V17H16V19.5L19.5,16" />
	</svg></div>
<div>Concurrency</div>
</div></a>
<a href="/seo" class="link heading fit unselectable" title><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,4.5L8.95,4.53C8.71,5.05 8.34,5.93 8.07,7H10.93C10.66,5.93 10.29,5.05 10.05,4.53C9.87,4.5 9.69,4.5 9.5,4.5M13.83,7C13.24,5.97 12.29,5.17 11.15,4.78C11.39,5.31 11.7,6.08 11.93,7H13.83M5.17,7H7.07C7.3,6.08 7.61,5.31 7.85,4.78C6.71,5.17 5.76,5.97 5.17,7M4.5,9.5C4.5,10 4.58,10.53 4.73,11H6.87L6.75,9.5L6.87,8H4.73C4.58,8.47 4.5,9 4.5,9.5M14.27,11C14.42,10.53 14.5,10 14.5,9.5C14.5,9 14.42,8.47 14.27,8H12.13C12.21,8.5 12.25,9 12.25,9.5C12.25,10 12.21,10.5 12.13,11H14.27M7.87,8L7.75,9.5L7.87,11H11.13C11.21,10.5 11.25,10 11.25,9.5C11.25,9 11.21,8.5 11.13,8H7.87M9.5,14.5C9.68,14.5 9.86,14.5 10.03,14.47C10.28,13.95 10.66,13.07 10.93,12H8.07C8.34,13.07 8.72,13.95 8.97,14.47L9.5,14.5M13.83,12H11.93C11.7,12.92 11.39,13.69 11.15,14.22C12.29,13.83 13.24,13.03 13.83,12M5.17,12C5.76,13.03 6.71,13.83 7.85,14.22C7.61,13.69 7.3,12.92 7.07,12H5.17Z" />
	</svg></div>
<div>SEO</div>
</div></a>
<a class="link heading fit unselectable" title href="/lifecycle"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M23,12L19,16V13H6.83C6.42,14.17 5.31,15 4,15A3,3 0 0,1 1,12A3,3 0 0,1 4,9C5.31,9 6.42,9.83 6.83,11H19V8L23,12Z" />
	</svg></div>
<div>Lifecycle and Updates</div>
</div></a>
<a class="link heading fit unselectable" title href="/install"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
	</svg></div>
<div>Install</div>
</div></a>
<a class="link heading fit unselectable" title href="/testing"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M7,2V4H8V18A4,4 0 0,0 12,22A4,4 0 0,0 16,18V4H17V2H7M11,16C10.4,16 10,15.6 10,15C10,14.4 10.4,14 11,14C11.6,14 12,14.4 12,15C12,15.6 11.6,16 11,16M13,12C12.4,12 12,11.6 12,11C12,10.4 12.4,10 13,10C13.6,10 14,10.4 14,11C14,11.6 13.6,12 13,12M14,7H10V4H14V7Z" />
	</svg></div>
<div>Testing</div>
</div></a>
<a class="link heading fit unselectable" title href="/actions"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M16,4L9,8.04V15.96L16,20L23,15.96V8.04M16,6.31L19.8,8.5L16,10.69L12.21,8.5M0,7V9H7V7M11,10.11L15,12.42V17.11L11,14.81M21,10.11V14.81L17,17.11V12.42M2,11V13H7V11M4,15V17H7V15" />
	</svg></div>
<div>Actions</div>
</div></a>
<a href="/states" class="link heading fit unselectable" title><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M4 12V9C4 11.2 7.6 13 12 13S20 11.2 20 9V12C20 12.5 19.8 12.9 19.5 13.4C18.7 13.1 17.9 13 17 13C14.5 13 12.1 14.1 10.6 15.9C6.8 15.6 4 14 4 12M12 11C16.4 11 20 9.2 20 7S16.4 3 12 3 4 4.8 4 7 7.6 11 12 11M9.1 19.7L8.8 19L9.1 18.3C9.2 18.1 9.3 18 9.3 17.8C6.2 17.2 4 15.8 4 14V17C4 18.8 6.4 20.3 9.7 20.8C9.5 20.5 9.3 20.1 9.1 19.7M17 18C16.4 18 16 18.4 16 19S16.4 20 17 20 18 19.6 18 19 17.6 18 17 18M23 19C22.1 21.3 19.7 23 17 23S11.9 21.3 11 19C11.9 16.7 14.3 15 17 15S22.1 16.7 23 19M19.5 19C19.5 17.6 18.4 16.5 17 16.5S14.5 17.6 14.5 19 15.6 21.5 17 21.5 19.5 20.4 19.5 19Z" />
	</svg></div>
<div>State Management</div>
</div></a>
<a class="link heading fit unselectable" title href="/notifications"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21" />
	</svg></div>
<div>Notifications</div>
</div></a>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="/migrate"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z" />
	</svg></div>
<div>Migrate From v8 to v9</div>
</div></a>
<a class="link heading fit unselectable" title href="/github-deploy"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
	</svg></div>
<div>Deploy on GitHub Pages</div>
</div></a>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="https://twitter.com/jonhymaxoo"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="#1DA1F2" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
	</svg></div>
<div>Twitter</div>
</div></a>
<a class="link heading fit unselectable" title href="https://github.com/maxence-charriere/go-app"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
	</svg></div>
<div>GitHub</div>
</div></a>
<a class="link heading fit unselectable" title href="https://opencollective.com/go-app"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M15.41,22C15.35,22 15.28,22 15.22,22C15.1,21.95 15,21.85 14.96,21.73L12.74,15.93C12.65,15.69 12.77,15.42 13,15.32C13.71,15.06 14.28,14.5 14.58,13.83C15.22,12.4 14.58,10.73 13.15,10.09C11.72,9.45 10.05,10.09 9.41,11.5C9.11,12.21 9.09,13 9.36,13.69C9.66,14.43 10.25,15 11,15.28C11.24,15.37 11.37,15.64 11.28,15.89L9,21.69C8.96,21.81 8.87,21.91 8.75,21.96C8.63,22 8.5,22 8.39,21.96C3.24,19.97 0.67,14.18 2.66,9.03C4.65,3.88 10.44,1.31 15.59,3.3C18.06,4.26 20.05,6.15 21.13,8.57C22.22,11 22.29,13.75 21.33,16.22C20.32,18.88 18.23,21 15.58,22C15.5,22 15.47,22 15.41,22M12,3.59C7.03,3.46 2.9,7.39 2.77,12.36C2.68,16.08 4.88,19.47 8.32,20.9L10.21,16C8.38,15 7.69,12.72 8.68,10.89C9.67,9.06 11.96,8.38 13.79,9.36C15.62,10.35 16.31,12.64 15.32,14.47C14.97,15.12 14.44,15.65 13.79,16L15.68,20.93C17.86,19.95 19.57,18.16 20.44,15.93C22.28,11.31 20.04,6.08 15.42,4.23C14.33,3.8 13.17,3.58 12,3.59Z" />
	</svg></div>
<div>Open Collective</div>
</div></a>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="/privacy-policy"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M22 17V16.5C22 15.12 20.88 14 19.5 14S17 15.12 17 16.5V17C16.45 17 16 17.45 16 18V22C16 22.55 16.45 23 17 23H22C22.55 23 23 22.55 23 22V18C23 17.45 22.55 17 22 17M21 17H18V16.5C18 15.67 18.67 15 19.5 15S21 15.67 21 16.5V17M8 8C8 5.79 9.79 4 12 4S16 5.79 16 8 14.21 12 12 12 8 10.21 8 8M14 20H4V18C4 15.79 7.58 14 12 14C13.27 14 14.46 14.15 15.53 14.41C15.32 14.82 15.15 15.25 15.07 15.71C14.42 16.26 14 17.08 14 18V20Z" />
	</svg></div>
<div>Privacy Policy</div>
</div></a>
<div class="separator"></div>
</nav></div>
<div style="width:calc(100% - 24px);padding:0 12px;height:0px;"></div>
</div></div></div>
<div style="position:relative;display:none;flex-shrink:0;flex-basis:270px;overflow:hidden;"><div data-goapp-ui="scroll" class="fill"><div style="width:100%;height:calc(100% - 24px);padding:12px 0;">
<div style="width:calc(100% - 24px);padding:0 12px;height:72px;"></div>
<div style="width:calc(100% - 24px);height:calc(100% - 72px);padding:0 12px;overflow-x:hidden;overflow-y:scroll;"><nav class="index">
<div class="separator"></div>
<header class="h2">Index</header>
<div class="separator"></div>
<a class="index-link" href="#what-is-a-component" title="What is a Component?">What is a Component?</a>
<a class="index-link" href="#create" title="Create">Create</a>
<a title="Customize Look" class="index-link" href="#customize-look">Customize Look</a>
<a class="index-link" href="#fields" title="Fields">Fields</a>
<a class="index-link" href="#exported-vs-unexported" title="Exported vs Unexported">    Exported vs Unexported</a>
<a class="index-link" href="#how-chose-between-exported-and-unexported" title="How chose between Exported and Unexported?">    How chose between Exported and Unexported?</a>
<a class="index-link" href="#lifecycle-events" title="Lifecycle Events">Lifecycle Events</a>
<a class="index-link" href="#prerender" title="PreRender">    PreRender</a>
<a title="Mount" class="index-link" href="#mount">    Mount</a>
<a class="index-link" href="#nav" title="Nav">    Nav</a>
<a class="index-link" href="#dismount" title="Dismount">    Dismount</a>
<a class="index-link" href="#reference" title="Reference">    Reference</a>
<a class="index-link" href="#updates" title="Updates">Updates</a>
<a class="index-link" href="#manually-trigger-an-update" title="Manually Trigger an Update">    Manually Trigger an Update</a>
<div class="separator"></div>
<a class="index-link" href="#next" title="Next">Next</a>
<a class="index-link" href="#report-an-issue" title="Report an Issue">Report an Issue</a>
<div class="separator"></div>
</nav></div>
<div style="width:calc(100% - 24px);padding:0 12px;height:0px;"></div>
</div></div></div>
<div style="position:relative;flex-grow:1;overflow:hidden;"><div data-goapp-ui="scroll" class="fill"><div style="width:100%;height:calc(100% - 24px);padding:12px 0;">
<div style="width:calc(100% - 24px);padding:0 12px;height:72px;"><nav class="fill"><div data-goapp="Stack" class="fill" style="display:flex;justify-content:flex-end;align-items:center;"></div></nav></div>
<div style="width:calc(100% - 24px);height:calc(100% - 72px);padding:0 12px;overflow-x:hidden;overflow-y:scroll;"><main><article>
<header class="page-title center" id="page-top"><div style="display:flex;justify-content:center;align-items:center;" data-goapp="Stack">
<div style="width:90px;height:90px;max-width:90px;max-height:90px;min-width:90px;min-height:90px;" data-goapp="Icon" class="icon-left unselectable"><svg style="width:90px;height:90px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M10,5V11H21V5M16,18H21V12H16M4,18H9V5H4M10,18H15V12H10V18Z" />
	</svg></div>
<h1>Components</h1>
</div></header>
<div class="separator"></div>
<div>
<aside class="heading fill" style="display:none;"><div data-goapp="Stack" style="display:flex;justify-content:center;align-items:center;width:100%;height:100%;">
<div style="width:56px;height:56px;min-width:56px;min-height:56px;border:2px solid currentColor;border-top:2px solid white;border-radius:50%;animation:goapp-spin-frames 500ms linear infinite;"></div>
<div style="margin-left:18px;"><div>Loading components.md...</div></div>
</div></aside>
<div class="fill"><div class="markdown"><h2 id="what-is-a-component">What is a component?</h2>

<p>A component is a customizable, independent, and reusable UI element that allows your UI to be split into independent and reusable pieces.</p>

<h2 id="create">Create</h2>

<p>Creating a component is done by embedding <a href="/reference#Compo">Compo</a> into a struct:</p>

<pre><code class="language-go">type hello struct {
    app.Compo
}
</code></pre>

<h2 id="customize-look">Customize Look</h2>

<p>Customizing a component look is done by implementing the <a href="/reference#Composer">Render()</a> method.</p>

<pre><code class="language-go">func (h *hello) Render() app.UI {
	return app.H1().Text(&quot;Hello World!&quot;)
}
</code></pre>

<p>The code above displays an <a href="/reference#H1">H1</a> HTML element that shows the <code>Hello World!</code> text.</p>

<p><code>Render()</code> returns a <a href="/reference#UI">UI element</a> that can be either an HTML element or another component. Refer to the <a href="/declarative-syntax">Declarative Syntax</a> topic to know more about how to customize a component look.</p>

<h2 id="fields">Fields</h2>

<p>Fields are struct fields that store data that can be used to customize a component when rendering. The example below shows a component that displays a name stored in a component field:</p>

<pre><code class="language-go">type hello struct {
	app.Compo
	Name string // Exported field.
}

func (h *hello) Render() app.UI {
	return app.Div().Text(&quot;Hello, &quot; + h.Name) // The Name field is display after &quot;Hello, &quot;
}
</code></pre>

<h3 id="exported-vs-unexported">Exported vs Unexported</h3>

<p>In addition to the <a href="https://stackoverflow.com/questions/40256161/exported-and-unexported-fields-in-go-language">Go distinction between exported and unexported fields</a>, go-app uses that distinction to define whether a component needs to be updated.</p>

<p>When a UI element update is triggered (done internally), a UI element tree is rendered and compared to the currently displayed one. When 2 child components of the same type are compared to check differences, the comparison is based on the value of exported fields.</p>

<p>Here is a pseudo-Go code that illustrates how it works internally:</p>

<pre><code class="language-go">type hello struct {
	app.Compo

	ExportedName   string
	unexportedName string
}

func updateFromExportedField() {
	current := &amp;hello{
		ExportedName:   &quot;Max&quot;,
		unexportedName: &quot;Eric&quot;,
	}

	new := &amp;hello{
		ExportedName:   &quot;Maxence&quot;,
		unexportedName: &quot;Erin&quot;,
	}

	update(app.Div().Body(current), app.Div().Body(new))

    // Current component exported field is updated:
	fmt.Println(&quot;current exported name:&quot; + current.ExportedName)     // Updated:     &quot;Maxence&quot;
	fmt.Println(&quot;current unexported name:&quot; + current.unexportedName) // Not Updated: &quot;Eric&quot;
}

func updateFromUnexportedField() {
	current := &amp;hello{
		ExportedName:   &quot;Max&quot;,
		unexportedName: &quot;Eric&quot;,
	}

	new := &amp;hello{
		ExportedName:   &quot;Max&quot;,
		unexportedName: &quot;Erin&quot;,
	}

	update(app.Div().Body(current), app.Div().Body(new))

	// Current component is not updated (no different exported field value):
	fmt.Println(&quot;current exported name:&quot; + current.ExportedName)     // Not Updated: &quot;Max&quot;
	fmt.Println(&quot;current unexported name:&quot; + current.unexportedName) // Not Updated: &quot;Eric&quot;
}
</code></pre>

<p><strong>Child components are updated only when there is diff with their exported fields</strong>, and <strong>only exported field are updated</strong>.</p>

<h3 id="how-chose-between-exported-and-unexported">How chose between exported and unexported?</h3>

<table>
<thead>
<tr>
<th>Component field type</th>
<th>Triggers update</th>
<th>Value change</th>
<th>Usecase</th>
</tr>
</thead>

<tbody>
<tr>
<td><strong>Exported field</strong></td>
<td>Yes</td>
<td>Yes</td>
<td>Component attribute</td>
</tr>

<tr>
<td><strong>Unexported field</strong></td>
<td>No</td>
<td>No</td>
<td>Component state</td>
</tr>
</tbody>
</table>

<h2 id="lifecycle-events">Lifecycle Events</h2>

<p>During its life, a component goes through several steps where actions can be performed to initialize or release data and resources.</p>

<p><img src="/web/images/compo-lifecycle.svg" alt="component lifecycle diagram" /></p>

<p>It is possible to trigger instructions when those different steps happen by implementing the corresponding interfaces in the component.</p>

<h3 id="prerender">Prerender</h3>

<p>A component is prerendered when it is used on the server-side to generate HTML markup that is included in a requested HTML page, allowing search engines to index contents created with go-app.</p>

<p>Custom actions can be performed by implementing the <a href="/reference#PreRenderer">PreRenderer</a> interface:</p>

<pre><code class="language-go">type foo struct {
    app.Compo
}

func (f *foo) OnPreRender(ctx app.Context) {
    fmt.Println(&quot;component prerendered&quot;)
}
</code></pre>

<h3 id="mount">Mount</h3>

<p>A component is mounted when it is inserted into the webpage DOM.</p>

<p>Custom actions can be performed by implementing the <a href="/reference#Mounter">Mounter</a> interface:</p>

<pre><code class="language-go">type foo struct {
    app.Compo
}

func (f *foo) OnMount(ctx app.Context) {
    fmt.Println(&quot;component mounted&quot;)
}
</code></pre>

<h3 id="nav">Nav</h3>

<p>A component is navigated when a page is loaded, reloaded, or navigated from an anchor link or an HREF change. It can occur multiple times during a component life.</p>

<p>Custom actions can be performed by implementing the <a href="/reference#Navigator">Navigator</a> interface:</p>

<pre><code class="language-go">type foo struct {
    app.Compo
}

func (f *foo) OnNav(ctx app.Context) {
    fmt.Println(&quot;component navigated:&quot;, u)
}
</code></pre>

<h3 id="dismount">Dismount</h3>

<p>A component is dismounted when it is removed from the webpage DOM.</p>

<p>Custom actions can be performed by implementing the <a href="/reference#Dismounter">Dismounter</a> interface:</p>

<pre><code class="language-go">type foo struct {
    app.Compo
}

func (f *foo) OnDismount() {
    fmt.Println(&quot;component dismounted&quot;)
}
</code></pre>

<h3 id="reference">Reference</h3>

<p>Here is a list of all the component lifecycle events available:</p>

<table>
<thead>
<tr>
<th>Interface</th>
<th>Description</th>
<th>Frequency</th>
</tr>
</thead>

<tbody>
<tr>
<td><a href="/reference#PreRenderer">PreRenderer</a></td>
<td>Listen to component prerendering.</td>
<td>Once on server-side</td>
</tr>

<tr>
<td><a href="/reference#Mounter">Mounter</a></td>
<td>Listen to component mounting.</td>
<td>Once on client-side</td>
</tr>

<tr>
<td><a href="/reference#Dismounter">Dismounter</a></td>
<td>Listen to component dismounting.</td>
<td>Once</td>
</tr>

<tr>
<td><a href="/reference#Navigator">Navigator</a></td>
<td>Listen to page navigation.</td>
<td>Once</td>
</tr>

<tr>
<td><a href="/reference#Updater">Updater</a></td>
<td>Listen to component update triggered by a parent element.</td>
<td>Can occur multiple times</td>
</tr>

<tr>
<td><a href="/reference#AppUpdater">AppUpdater</a></td>
<td>Listen to available app update.</td>
<td>Can occur once</td>
</tr>

<tr>
<td><a href="/reference#AppInstaller">AppInstaller</a></td>
<td>Listen to whether an app is installable.</td>
<td>Can occur once</td>
</tr>

<tr>
<td><a href="/reference#Resizer">Resizer</a></td>
<td>Listen to the app and parent components resizes.</td>
<td>Each time a component is resized</td>
</tr>
</tbody>
</table>

<h2 id="updates">Updates</h2>

<p>Components are meant to be responsive to different events, modifying their appearance when they occur.</p>

<p>When this is happening, go-app internally starts an update mechanism that checks modifications in the currently displayed UI element tree and, performs the necessary modifications to achieve the desired state.</p>

<p><strong>This update mechanism is automatically trigerred when the following scenario occurs:</strong></p>

<ul>
<li><a href="#lifecycle-events-reference">Component lifecycle events</a></li>
<li><a href="/declarative-syntax#event-handlers">HTML event handlers</a></li>
<li><a href="/reference#Context.Dispatch">Context.Dispatch</a></li>
<li><a href="/reference#Context.Handler">Context.Handle</a></li>
<li><a href="/reference#Context.ObserveState">Context.ObserveState</a></li>
</ul>

<h3 id="manually-trigger-an-update">Manually Trigger an Update</h3>

<p>In the event where it is not automatically triggered with your use case, the component update mechanism can be manually launched by using <a href="/reference#Compo.Update">Compo.Update</a>.</p>

<pre><code class="language-go">type myCompo struct {
	app.Compo

	Number int
}

func (c *myCompo) Render() app.UI {
	return app.Div().Text(c.Number)
}

func (c *myCompo) customTrigger() {
	c.Number = rand.Intn(42)
	c.Update() // Manual updated trigger
}
</code></pre>

<h2 id="next">Next</h2>

<ul>
<li><a href="/declarative-syntax">Customize components with the declarative syntax</a></li>
<li><a href="/reference">Reference</a></li>
</ul>
</div></div>
</div>
<div class="separator"></div>
<aside>
<header id="repport-an-issue" class="h2">Report an issue</header>
<p>
Found something incorrect, a typo or have suggestions to improve this page? 
<a href="https://github.com/maxence-charriere/go-app/issues/new?title=Documentation issue in Components page">🚀 Submit a GitHub issue!</a>
</p>
</aside>
<div class="separator"></div>
</article></main></div>
<div style="width:calc(100% - 24px);padding:0 12px;height:0px;"></div>
</div></div></div>
<div style="position:relative;display:none;flex-shrink:0;flex-basis:336px;overflow:hidden;"><div class="fill" data-goapp-ui="flyer"><div style="width:100%;height:calc(100% - 24px);padding:12px 0;">
<div style="width:calc(100% - 36px);padding:0 18px;height:72px;"></div>
<div id="goapp-flyer-layout-779b35d0-1a12-4b3a-bc79-ef49ca477ee3" style="display:flex;flex-direction:column;justify-content:center;width:calc(100% - 36px);height:calc(100% - 72px);padding:0 18px;overflow:hidden;">
<div style="height:0px;overflow:hidden;"><aside class="fill"><div class="fill no-scroll" data-goapp-ui="adsenseDisplay"><ins id="goapp-adsense-display-6add2909-03f8-46ac-b912-61ee0b2c82a7"></ins></div></aside></div>
<div style="display:none;height:0px;"><div data-goapp="Stack" class="fill" style="display:flex;justify-content:center;align-items:center;"><aside class="magnify text-center"><a href="https://github.com/sponsors/maxence-charriere" class="default">
<div data-goapp="Icon" class="center icon-top" style="width:72px;height:72px;max-width:72px;max-height:72px;min-width:72px;min-height:72px;"><svg style="width:72px;height:72px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
	</svg></div>
<header class="h3 default">Support on GitHub</header>
<p class="subtext">Help with go-app development by sponsoring it on GitHub.</p>
</a></aside></div></div>
<div style="display:none;height:0px;overflow:hidden;"></div>
</div>
<div style="width:calc(100% - 36px);padding:0 18px;height:0px;"></div>
</div></div></div>
</div>
<div style="display:block;position:absolute;top:0;left:0;cursor:pointer;"><div class="goapp-shell-hamburger-button-default">☰</div></div>
<div style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;"><div data-goapp-ui="scroll" class="menu fill menu-hamburger-background"><div style="width:100%;height:calc(100% - 24px);padding:12px 0;">
<div style="width:calc(100% - 24px);padding:0 12px;height:72px;"><div class="fill" style="display:flex;justify-content:flex-start;align-items:center;" data-goapp="Stack"><header><a class="heading app-title" href="/">Go-App</a></header></div></div>
<div style="width:calc(100% - 24px);height:calc(100% - 72px);padding:0 12px;overflow-x:hidden;overflow-y:scroll;"><nav>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="/"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
	</svg></div>
<div>Home</div>
</div></a>
<a class="link heading fit unselectable" title href="/getting-started"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 10.87L7.91 8.1C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39C21.61 2.39 16.66 .269 11 5.93C8.81 8.12 7.5 10.53 6.65 12.64C6.37 13.39 6.56 14.21 7.11 14.77L9.24 16.89C9.79 17.45 10.61 17.63 11.36 17.35C13.5 16.53 15.88 15.19 18.07 13C23.73 7.34 21.61 2.39 21.61 2.39M14.54 9.46C13.76 8.68 13.76 7.41 14.54 6.63S16.59 5.85 17.37 6.63C18.14 7.41 18.15 8.68 17.37 9.46C16.59 10.24 15.32 10.24 14.54 9.46M8.88 16.53L7.47 15.12L8.88 16.53M6.24 22L9.88 18.36C9.54 18.27 9.21 18.12 8.91 17.91L4.83 22H6.24M2 22H3.41L8.18 17.24L6.76 15.83L2 20.59V22M2 19.17L6.09 15.09C5.88 14.79 5.73 14.47 5.64 14.12L2 17.76V19.17Z" />
	</svg></div>
<div>Getting Started</div>
</div></a>
<a class="link heading fit unselectable" title href="/architecture"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M9,2V8H11V11H5C3.89,11 3,11.89 3,13V16H1V22H7V16H5V13H11V16H9V22H15V16H13V13H19V16H17V22H23V16H21V13C21,11.89 20.11,11 19,11H13V8H15V2H9Z" />
	</svg></div>
<div>Architecture</div>
</div></a>
<a class="link heading fit unselectable" title href="/reference"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg width="24px" height="24px" viewBox="0 0 207 78" xmlns="http://www.w3.org/2000/svg">
		<g fill="currentColor" fill-rule="evenodd">
			<path d="m16.2 24.1c-.4 0-.5-.2-.3-.5l2.1-2.7c.2-.3.7-.5 1.1-.5h35.7c.4 0 .5.3.3.6l-1.7 2.6c-.2.3-.7.6-1 .6z"/>
			<path d="m1.1 33.3c-.4 0-.5-.2-.3-.5l2.1-2.7c.2-.3.7-.5 1.1-.5h45.6c.4 0 .6.3.5.6l-.8 2.4c-.1.4-.5.6-.9.6z"/>
			<path d="m25.3 42.5c-.4 0-.5-.3-.3-.6l1.4-2.5c.2-.3.6-.6 1-.6h20c.4 0 .6.3.6.7l-.2 2.4c0 .4-.4.7-.7.7z"/>
			<g transform="translate(55)">
				<path d="m74.1 22.3c-6.3 1.6-10.6 2.8-16.8 4.4-1.5.4-1.6.5-2.9-1-1.5-1.7-2.6-2.8-4.7-3.8-6.3-3.1-12.4-2.2-18.1 1.5-6.8 4.4-10.3 10.9-10.2 19 .1 8 5.6 14.6 13.5 15.7 6.8.9 12.5-1.5 17-6.6.9-1.1 1.7-2.3 2.7-3.7-3.6 0-8.1 0-19.3 0-2.1 0-2.6-1.3-1.9-3 1.3-3.1 3.7-8.3 5.1-10.9.3-.6 1-1.6 2.5-1.6h36.4c-.2 2.7-.2 5.4-.6 8.1-1.1 7.2-3.8 13.8-8.2 19.6-7.2 9.5-16.6 15.4-28.5 17-9.8 1.3-18.9-.6-26.9-6.6-7.4-5.6-11.6-13-12.7-22.2-1.3-10.9 1.9-20.7 8.5-29.3 7.1-9.3 16.5-15.2 28-17.3 9.4-1.7 18.4-.6 26.5 4.9 5.3 3.5 9.1 8.3 11.6 14.1.6.9.2 1.4-1 1.7z"/>
				<path d="m107.2 77.6c-9.1-.2-17.4-2.8-24.4-8.8-5.9-5.1-9.6-11.6-10.8-19.3-1.8-11.3 1.3-21.3 8.1-30.2 7.3-9.6 16.1-14.6 28-16.7 10.2-1.8 19.8-.8 28.5 5.1 7.9 5.4 12.8 12.7 14.1 22.3 1.7 13.5-2.2 24.5-11.5 33.9-6.6 6.7-14.7 10.9-24 12.8-2.7.5-5.4.6-8 .9zm23.8-40.4c-.1-1.3-.1-2.3-.3-3.3-1.8-9.9-10.9-15.5-20.4-13.3-9.3 2.1-15.3 8-17.5 17.4-1.8 7.8 2 15.7 9.2 18.9 5.5 2.4 11 2.1 16.3-.6 7.9-4.1 12.2-10.5 12.7-19.1z" fill-rule="nonzero"/>
			</g>
		</g>
	</svg></div>
<div>Reference</div>
</div></a>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="/components"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M10,5V11H21V5M16,18H21V12H16M4,18H9V5H4M10,18H15V12H10V18Z" />
	</svg></div>
<div>Components</div>
</div></a>
<a class="link heading fit unselectable" title href="/declarative-syntax"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
	</svg></div>
<div>Declarative Syntax</div>
</div></a>
<a class="link heading fit unselectable" title href="/routing"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M11,10H5L3,8L5,6H11V3L12,2L13,3V4H19L21,6L19,8H13V10H19L21,12L19,14H13V20A2,2 0 0,1 15,22H9A2,2 0 0,1 11,20V10Z" />
	</svg></div>
<div>Routing</div>
</div></a>
<a class="link heading fit unselectable" title href="/static-resources"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M7,15L11.5,9L15,13.5L17.5,10.5L21,15M22,4H14L12,2H6A2,2 0 0,0 4,4V16A2,2 0 0,0 6,18H22A2,2 0 0,0 24,16V6A2,2 0 0,0 22,4M2,6H0V11H0V20A2,2 0 0,0 2,22H20V20H2V6Z" />
	</svg></div>
<div>Images and Static Resources</div>
</div></a>
<a title href="/js" class="link heading fit unselectable"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z" />
	</svg></div>
<div>JavaScript Interoperability</div>
</div></a>
<a class="link heading fit unselectable" title href="/concurrency"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M16,4.5V7H5V9H16V11.5L19.5,8M16,12.5V15H5V17H16V19.5L19.5,16" />
	</svg></div>
<div>Concurrency</div>
</div></a>
<a class="link heading fit unselectable" title href="/seo"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,4.5L8.95,4.53C8.71,5.05 8.34,5.93 8.07,7H10.93C10.66,5.93 10.29,5.05 10.05,4.53C9.87,4.5 9.69,4.5 9.5,4.5M13.83,7C13.24,5.97 12.29,5.17 11.15,4.78C11.39,5.31 11.7,6.08 11.93,7H13.83M5.17,7H7.07C7.3,6.08 7.61,5.31 7.85,4.78C6.71,5.17 5.76,5.97 5.17,7M4.5,9.5C4.5,10 4.58,10.53 4.73,11H6.87L6.75,9.5L6.87,8H4.73C4.58,8.47 4.5,9 4.5,9.5M14.27,11C14.42,10.53 14.5,10 14.5,9.5C14.5,9 14.42,8.47 14.27,8H12.13C12.21,8.5 12.25,9 12.25,9.5C12.25,10 12.21,10.5 12.13,11H14.27M7.87,8L7.75,9.5L7.87,11H11.13C11.21,10.5 11.25,10 11.25,9.5C11.25,9 11.21,8.5 11.13,8H7.87M9.5,14.5C9.68,14.5 9.86,14.5 10.03,14.47C10.28,13.95 10.66,13.07 10.93,12H8.07C8.34,13.07 8.72,13.95 8.97,14.47L9.5,14.5M13.83,12H11.93C11.7,12.92 11.39,13.69 11.15,14.22C12.29,13.83 13.24,13.03 13.83,12M5.17,12C5.76,13.03 6.71,13.83 7.85,14.22C7.61,13.69 7.3,12.92 7.07,12H5.17Z" />
	</svg></div>
<div>SEO</div>
</div></a>
<a class="link heading fit unselectable" title href="/lifecycle"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M23,12L19,16V13H6.83C6.42,14.17 5.31,15 4,15A3,3 0 0,1 1,12A3,3 0 0,1 4,9C5.31,9 6.42,9.83 6.83,11H19V8L23,12Z" />
	</svg></div>
<div>Lifecycle and Updates</div>
</div></a>
<a class="link heading fit unselectable" title href="/install"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
	</svg></div>
<div>Install</div>
</div></a>
<a class="link heading fit unselectable" title href="/testing"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M7,2V4H8V18A4,4 0 0,0 12,22A4,4 0 0,0 16,18V4H17V2H7M11,16C10.4,16 10,15.6 10,15C10,14.4 10.4,14 11,14C11.6,14 12,14.4 12,15C12,15.6 11.6,16 11,16M13,12C12.4,12 12,11.6 12,11C12,10.4 12.4,10 13,10C13.6,10 14,10.4 14,11C14,11.6 13.6,12 13,12M14,7H10V4H14V7Z" />
	</svg></div>
<div>Testing</div>
</div></a>
<a class="link heading fit unselectable" title href="/actions"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M16,4L9,8.04V15.96L16,20L23,15.96V8.04M16,6.31L19.8,8.5L16,10.69L12.21,8.5M0,7V9H7V7M11,10.11L15,12.42V17.11L11,14.81M21,10.11V14.81L17,17.11V12.42M2,11V13H7V11M4,15V17H7V15" />
	</svg></div>
<div>Actions</div>
</div></a>
<a class="link heading fit unselectable" title href="/states"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M4 12V9C4 11.2 7.6 13 12 13S20 11.2 20 9V12C20 12.5 19.8 12.9 19.5 13.4C18.7 13.1 17.9 13 17 13C14.5 13 12.1 14.1 10.6 15.9C6.8 15.6 4 14 4 12M12 11C16.4 11 20 9.2 20 7S16.4 3 12 3 4 4.8 4 7 7.6 11 12 11M9.1 19.7L8.8 19L9.1 18.3C9.2 18.1 9.3 18 9.3 17.8C6.2 17.2 4 15.8 4 14V17C4 18.8 6.4 20.3 9.7 20.8C9.5 20.5 9.3 20.1 9.1 19.7M17 18C16.4 18 16 18.4 16 19S16.4 20 17 20 18 19.6 18 19 17.6 18 17 18M23 19C22.1 21.3 19.7 23 17 23S11.9 21.3 11 19C11.9 16.7 14.3 15 17 15S22.1 16.7 23 19M19.5 19C19.5 17.6 18.4 16.5 17 16.5S14.5 17.6 14.5 19 15.6 21.5 17 21.5 19.5 20.4 19.5 19Z" />
	</svg></div>
<div>State Management</div>
</div></a>
<a class="link heading fit unselectable" title href="/notifications"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21" />
	</svg></div>
<div>Notifications</div>
</div></a>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="/migrate"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z" />
	</svg></div>
<div>Migrate From v8 to v9</div>
</div></a>
<a title href="/github-deploy" class="link heading fit unselectable"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
	</svg></div>
<div>Deploy on GitHub Pages</div>
</div></a>
<div class="separator"></div>
<a title href="https://twitter.com/jonhymaxoo" class="link heading fit unselectable"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="#1DA1F2" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
	</svg></div>
<div>Twitter</div>
</div></a>
<a class="link heading fit unselectable" title href="https://github.com/maxence-charriere/go-app"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
	</svg></div>
<div>GitHub</div>
</div></a>
<a class="link heading fit unselectable" title href="https://opencollective.com/go-app"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M15.41,22C15.35,22 15.28,22 15.22,22C15.1,21.95 15,21.85 14.96,21.73L12.74,15.93C12.65,15.69 12.77,15.42 13,15.32C13.71,15.06 14.28,14.5 14.58,13.83C15.22,12.4 14.58,10.73 13.15,10.09C11.72,9.45 10.05,10.09 9.41,11.5C9.11,12.21 9.09,13 9.36,13.69C9.66,14.43 10.25,15 11,15.28C11.24,15.37 11.37,15.64 11.28,15.89L9,21.69C8.96,21.81 8.87,21.91 8.75,21.96C8.63,22 8.5,22 8.39,21.96C3.24,19.97 0.67,14.18 2.66,9.03C4.65,3.88 10.44,1.31 15.59,3.3C18.06,4.26 20.05,6.15 21.13,8.57C22.22,11 22.29,13.75 21.33,16.22C20.32,18.88 18.23,21 15.58,22C15.5,22 15.47,22 15.41,22M12,3.59C7.03,3.46 2.9,7.39 2.77,12.36C2.68,16.08 4.88,19.47 8.32,20.9L10.21,16C8.38,15 7.69,12.72 8.68,10.89C9.67,9.06 11.96,8.38 13.79,9.36C15.62,10.35 16.31,12.64 15.32,14.47C14.97,15.12 14.44,15.65 13.79,16L15.68,20.93C17.86,19.95 19.57,18.16 20.44,15.93C22.28,11.31 20.04,6.08 15.42,4.23C14.33,3.8 13.17,3.58 12,3.59Z" />
	</svg></div>
<div>Open Collective</div>
</div></a>
<div class="separator"></div>
<a title href="/privacy-policy" class="link heading fit unselectable"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M22 17V16.5C22 15.12 20.88 14 19.5 14S17 15.12 17 16.5V17C16.45 17 16 17.45 16 18V22C16 22.55 16.45 23 17 23H22C22.55 23 23 22.55 23 22V18C23 17.45 22.55 17 22 17M21 17H18V16.5C18 15.67 18.67 15 19.5 15S21 15.67 21 16.5V17M8 8C8 5.79 9.79 4 12 4S16 5.79 16 8 14.21 12 12 12 8 10.21 8 8M14 20H4V18C4 15.79 7.58 14 12 14C13.27 14 14.46 14.15 15.53 14.41C15.32 14.82 15.15 15.25 15.07 15.71C14.42 16.26 14 17.08 14 18V20Z" />
	</svg></div>
<div>Privacy Policy</div>
</div></a>
<div class="separator"></div>
</nav></div>
<div style="width:calc(100% - 24px);padding:0 12px;height:0px;"></div>
</div></div></div>
</div>
<aside id="app-wasm-loader" class="goapp-app-info">
<img src="/web/icon.png" id="app-wasm-loader-icon" class="goapp-logo goapp-spin">
<p id="app-wasm-loader-label" class="goapp-label">go-app documentation 0%</p>
</aside>
</body>
</html>